<template>
	<view class="page-index">
<!-- 		<view class="search-box">
			<i class="iconfont fontclassIcon_Search"></i>
			搜索需求
		</view> -->
		<view class="max">
			最多选择5个
		</view>
		<view class="scroll-box">
			<scroll-view scroll-y="true" style="width: 50%;" show-scrollbar='false' enhanced>
				<view :class="[position1Index==index?'position1-boxCh':'position1-box']"
					v-for="(item,index) in position1List" :key="index" @click="position1Change(item,index)">
					{{item.title}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" style="width: 50%;" show-scrollbar='false' enhanced>
				<view :class="[position2Index.indexOf(item)>-1?'position2-boxCh':'position2-box']"
					v-for="(item,index) in position2List" :key="index" @click="position2Change(item)">
					{{item.title}}
				</view>
			</scroll-view>
		</view>
		<view class="fixed">
			<view class="change-box">
				<view class="changed" v-for="(item,index) in position2Index" :key="index" @click='remove(item)'>
					{{item.title}}
					<i class="iconfont fontclassIcon_close"></i>
				</view>
			</view>
			<view class="button-box">
				<view class="reset" @click="reset()">
					重置
				</view>
				<view class="submit" @click="submit()">
					确定{{position2Index.length}}/5
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	export default {
		data() {
			return {
				num:5,
				position1List: [], //1级需求分类列表
				position1Index: 0, //1级需求分类选项
				position2List: [], //2级需求分类列表
				position2Index: [], //2级需求分类选项
			}
		},
		onLoad(params) {
			if(params.num){
				this.num = params.num
			}
			this.getPidPositionTypeList()
			this.getPidPositionTypeList2({
				id: 1
			})
		},
		methods: {
			//1级需求分类点击
			position1Change(item, index) {
				this.position1Index = index
				this.getPidPositionTypeList2(item)
			},
			//2级需求分类点击
			position2Change(item) {
				if (this.position2Index.indexOf(item) < 0) {
					if (this.position2Index.length < this.num) {
						this.position2Index.push(item)
					} else {
						uni.showToast({
							icon: 'none',
							title: `最多选择${this.num}个`,
							duration: 2000
						});
					}
				} else {
					this.removeByValue(this.position2Index, item)
				}

			},
			//获取1级列表数据
			getPidPositionTypeList() {
				index.getPidPositionTypeList({
					pid: 0
				}).then(res => {
					this.position1List = res.data

				})
			},
			//获取2级列表数据
			getPidPositionTypeList2(item) {
				index.getPidPositionTypeList({
					pid: item.id
				}).then(res => {
					this.position2List = res.data
				})
			},
			//移除
			removeByValue(arr, val) {
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] == val) {
						arr.splice(i, 1);
						break;
					}
				}
			},
			remove(item){
				this.removeByValue(this.position2Index,item)
			},
			//重置
			reset(){
				this.position2Index=[]
			},
			//确定
			submit(){
				uni.$emit('name',this.position2Index)
				this.$tools.back(1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-index {
		height: 100%;
		background: #ffffff !important;

		.search-box {
			display: flex;
			align-items: center;
			padding-left: 45rpx;
			background: #F9F9F9;
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 66rpx;
			width: 100%;
			margin-right: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #9D9A9A;
		}

		.max {
			font-size: 26rpx;
			font-weight: 400;
			color: #646464;
			padding: 19rpx 31rpx;
		}

		.scroll-box {
			display: flex;
			scroll-view{
				height: calc(100vh - 600rpx);
			}
			.position1-box {
				background: #f7f6f9;
				padding: 20rpx 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}

			.position1-boxCh {
				background: #ffffff;
				padding: 20rpx 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FF6600;
			}

			.position2-box {
				background: #ffffff;
				padding: 20rpx 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}

			.position2-boxCh {
				background: #ffffff;
				padding: 20rpx 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FF6600;
			}
		}

		.fixed {
			position: fixed;
			bottom: 0;
			background: #ffffff;
			width: 100%;
			padding-bottom: env(safe-area-inset-bottom);

			.change-box {
				display: flex;
				flex-wrap: wrap;
				.changed {
					display: flex;
					align-items: center;
					padding: 9rpx 21rpx;
					border: 2r solid #FF7700;
					font-size: 26rpx;
					font-weight: 400;
					color: #FF7700;
					border-radius: 27rpx;
					border: 2rpx solid #FF7700;
					margin-bottom: 40rpx;
					margin-left: 41rpx;
				}
			}

			.button-box {
				display: flex;
				justify-content: space-around;

				.reset {
					padding: 27rpx 68rpx;
					background: #F8F7F5;
					border-radius: 4rpx;
				}

				.submit {
					padding: 27rpx 126rpx;
					background: #FF7700;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					border-radius: 4rpx;
				}
			}
		}
	}
</style>
